<template>
  <div class="media-tabs bg-background">
    <div class="tabs d-flex flex-row align-center">
      <div
        v-for="tab in tabs"
        :key="tab[`${tabValue}`]"
        class="tab pointer d-flex justify-center align-center align-self-stretch flex-1-0"
        :style="{ width: tabWidth }"
        @click="modelValue = tab[`${props.tabValue}`]"
      >
        <Icon
          v-if="tab.icon"
          :name="modelValue === tab[`${tabValue}`] ? tab[`${tabActiveIcon}`] : tab[`${tabIcon}`]"
          size="24"
        ></Icon>
        <div v-else>
          <div
            class="font-size-14 font-weight-500 line-height-140"
            :class="{ 'text-primary': modelValue === tab[`${props.tabValue}`] }"
          >
            {{ $t(tab[`${tabLabel}`]) }}
          </div>
        </div>
      </div>
    </div>
    <div class="index bg-primary" :style="indexStyle"></div>
  </div>
</template>
<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: [String, Number],
    required: true,
  },
  tabs: {
    type: Array,
    required: true,
  },
  tabValue: {
    type: String,
    default: 'value',
  },
  tabLabel: {
    type: String,
    default: 'label',
  },
  tabIcon: {
    type: String,
    default: 'icon',
  },
  tabActiveIcon: {
    type: String,
    default: 'activeIcon',
  },
})

const emit = defineEmits(['update:modelValue'])

const modelValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})

const indexStyle = computed(() => ({
  width: `calc(100% / ${props.tabs.length})`,
  transform: `translate(${props.tabs.findIndex((e) => e.value === modelValue.value) * 100}%, -0.109375rem)`,
}))

const tabWidth = computed(() => `calc(100% / ${props.tabs.length})`)
</script>
<style scoped lang="scss">
.media-tabs {
  .tabs {
    .tab {
      padding: 0.125rem 0 0.525rem;
      border-bottom: 1px solid #fff;
    }
  }
  .index {
    height: 0.15625rem;
    border-radius: 0.1rem;
    transition: transform 0.2s ease;
  }
}
</style>
